<template>
  <div id="rose-chart">
    <div class="title">不合格商户名称</div>
    <dv-scroll-board :config="config" ref="scrollBoard" style="width:95%;height:90%" />
  </div>
</template>
<script>


export default {
  name: 'RoseChart',
  props: {
    noPassMarketList: [],
    checkMonth: ''
  },
  data() {
    return {
      dataList: [],
      config: {
        header: ['市场', '商户名称'],
        data: [
        ],
        columnWidth: [200, 200],
        align: ['center', 'center'],
        oddRowBGC: 'rgba(12,48,65,0.4)',
        evenRowBGC: 'rgba(10, 32, 50, 0.3)',
      }
    }
  },
  watch: {
    noPassMarketList() {
      this.showCharts()
    }
  },
  methods: {
    showCharts() {
      const resultList = this.noPassMarketList.map(item => {
        return [
          item.affiliationName,
          item.marketName
        ]
      })
      console.log(this.noPassMarketList)
      console.log(resultList, '商户名称')
      this.config.data = resultList

      this.config = { ...this.config }
      console.log(this.config.data, '商户名称')


    }

  },
}

</script>

<style lang="less">
#rose-chart {
  height: 100%;
  background-color: rgba(6, 30, 93, 0.5);
  box-sizing: border-box;
  padding-left: 15px;

  .title {
    font-size: 18px;
    font-weight: bolder;
    margin: 8px 0 10px 15px;
  }

}
</style>
